<template>
	<view class="page">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->

		<u--form labelPosition="left" :model="model" :rules="rules" ref="form1">
			<u-form-item label="行业类别" label-width="80" borderBottom
				@click="gongzhongisShow = true; hideKeyboard()" ref="item1">
				<u--input v-model="hangyeType" disabled disabledColor="#ffffff" placeholder="请选择行业类别"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="岗位标题" label-width="80" prop="userInfo.title" borderBottom ref="item1">
				<u--input v-model="model.userInfo.title" border="none"></u--input>
			</u-form-item>
			<u-form-item label="工作地点" label-width="80" prop="userInfo.address" borderBottom ref="item1">
				<u--input v-model="model.userInfo.address" placeholder="请输入工作地点或地图选择" border="none"></u--input>
			</u-form-item>
			
			<u-form-item v-if="isqujian==0" label="待遇工资" label-width="80" borderBottom ref="item1">
				<view style="display: flex;flex-direction: row;">
					<view style="display: flex;flex-direction: row;text-align: right;"
						@click="gudinggongziShow = true; hideKeyboard()">
						<u--input v-model="gudingxinzi" disabled disabledColor="#ffffff"
							placeholder="固定工资" border="none"></u--input>
						<u-icon slot="right" name="arrow-down"></u-icon>
					</view>
					<view style="display: flex;flex-direction: row;">
						<u--input style="width: 120px;text-align: center;" v-model="moeny"
							placeholder="0" border="none">0</u--input>
					</view>
					<view style="display: flex;flex-direction: row;" @click="danweiShow = true; hideKeyboard()">
						<u--input style="width: 120px;" v-model="danwei" disabled disabledColor="#ffffff"
							border="none"></u--input>
						<u-icon slot="right" name="arrow-down"></u-icon>
					</view>
				</view>
			</u-form-item>
			<u-form-item v-if="isqujian==1" label="待遇工资" label-width="80" prop="userInfo.gender" borderBottom
				ref="item1">
				<view style="display: flex;flex-direction: row;">
					<view style="display: flex;flex-direction: row;" @click="gudinggongziShow = true; hideKeyboard()">
						<u--input v-model="gudingxinzi" disabled disabledColor="#ffffff"
							placeholder="区间工资" border="none"></u--input>
						<u-icon name="arrow-down"></u-icon>
					</view>
					<view style="display: flex;flex-direction: row;text-align: center;"
						@click="show = true; hideKeyboard()">
						<u--input style="width: 120px;" v-model="moeny" disabled disabledColor="#ffffff"
							placeholder="请选择" border="none"></u--input>
						<u-icon slot="right" name="arrow-down"></u-icon>
					</view>
					<view style="display: flex;flex-direction: row;" @click="danweiShow = true; hideKeyboard()">
						<u--input style="width: 120px;" v-model="danwei" disabled disabledColor="#ffffff"
							border="none"></u--input>
						<u-icon slot="right" name="arrow-down"></u-icon>
					</view>
				</view>
			</u-form-item>
			<u-form-item label="岗位描述" label-width="80" prop="userInfo.workContent" borderBottom ref="item3">
				<u--textarea placeholder="请输入岗位描述" v-model="model.userInfo.workContent" count></u--textarea>
			</u-form-item>
			<u-form-item label="结算方式" label-width="80" prop="userInfo.jiesuan" borderBottom
				@click="jiesuanShow = true; hideKeyboard()" ref="item1">
				<u--input v-model="jiesuan" disabled disabledColor="#ffffff" placeholder="请选择结算方式"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>

			<u-form-item label="报名方式" label-width="80" borderBottom
				@click="baomingShow = true; hideKeyboard()" ref="item1">
				<u--input v-model="fangshi" disabled disabledColor="#ffffff" placeholder="请选择报名方式"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="联系人" label-width="80" prop="userInfo.contractPeople" borderBottom ref="item1">
				<u--input v-model="model.userInfo.contractPeople" placeholder="请输入联系人姓名" border="none"></u--input>
			</u-form-item>
			<u-form-item label="联系电话" label-width="80" prop="userInfo.contractMobile" borderBottom ref="item1">
				<u--input v-model="model.userInfo.contractMobile" placeholder="请输入联系人电话" border="none"></u--input>
			</u-form-item>
		</u--form>
		<u-button style="margin-top:150px;background-color: bisque;" @click="submit">提交</u-button>
		
		
		<u-action-sheet :show="gudinggongziShow" :actions="gongzitype" title="请选择工资类别"
			@close="gudinggongziShow = false;genderClose()" @select="gudingSelect()">
		</u-action-sheet>
		<u-action-sheet :show="danweiShow" :actions="danweiunit" title="请选择工资单位"
			@close="danweiShow = false;genderClose()" @select="unitSelect()">
		</u-action-sheet>
		<u-action-sheet :show="baomingShow" :actions="actions" title="请选择报名方式"
			@close="baomingShow = false;genderClose()" @select="baomingSelect()">
		</u-action-sheet>
		<u-action-sheet :show="jiesuanShow" :actions="jiesuanType" title="请选择结算方式"
			@close="jiesuanShow = false;genderClose()" @select="jiesuanSelect()">
		</u-action-sheet>
		<u-datetime-picker :show="showBirthday" :value="birthday" mode="date" closeOnClickOverlay
			@confirm="birthdayConfirm" @cancel="birthdayClose" @close="birthdayClose"></u-datetime-picker>


		<!-- <u-picker mode="selector" v-model="gongzhongisShow"  :default-selector="[0]" :show="gongzhongisShow" :range="gongzhongList"  range-key="skillName"
			@confirm="confirm" @cancel="gongzhongisShow = false"></u-picker> -->
		<u-picker :show="show" ref="uPicker" :columns="columns" @confirm="confirm" @change="changeHandler"></u-picker>
		<u-picker :show="gongzhongisShow" ref="gongzhongPicker" :columns="gongzhongcolumns" @confirm="confirm"
			@change="bindMultiPickerColumnChange" @cancel="gongzhongisShow = false"></u-picker>
		<!-- <u-picker mode="multiSelector" :defaultSelector="defaultSelector" v-model="gongzhongisShow"
			:show="gongzhongisShow" :range="gongzhongList" range-key="skillName"></u-picker> -->

	</view>

</template>

<script>
	import uTabbar from "@/components/uTabbar/uTabbar.vue";
	import pop from "@/components/ming-pop/ming-cityindex.vue"
	import store from '@/common/store.js'
	import Index from '@/common/index-model.js'
	import fun from '@/common/publicFun.js'
	let index = new Index();
	let that = null;

	export default {
		data() {
			return {
				isqujian: 0,
				columns: [],
				columnData: [],
				show: false,
				gongzhongcolumns: [0, 0, 0],
				gongzhongList: [],
				gongzhongdata: [],
				gongzhongisShow: false, // 是否显示工种选择

				gudinggongziShow: false, // 是否显示固定工资选择
				danweiShow: false, // 是否显示单位选择
				baomingShow: false, // 是否显示报名方式选择
				jiesuanShow: false, // 是否显示结算方式选择
				hangyeType: '',
				gudingxinzi:'固定工资',
				jiesuan:'',
				moeny:'',
				fangshi:'',
				danwei:'',
				model: {
					userInfo: {
						type:0,
						title:'',
						mapFlag:0,
						address:'',
						lon:'',
						lat:'',
						workContent:'',
						welfares:'',
						contractMethod:0,
						contractPeople:'',
						contractMobile:'',
						salaryUnit:0,
						salaryMin:0,
						salaryMax:0,
						settlement:0
					}
				},
				actions: [{
						name: '电话联系',
					},
					{
						name: '资料报名',
					}
				],
				gongzitype: [{
						name: '固定工资',
					},
					{
						name: '区间工资',
					}
				],
				danweiunit: [],
				jiesuanType: [],
				rules: {
					'userInfo.userName': {
						type: 'string',
						required: true,
						message: '请填写昵称',
						trigger: ['blur', 'change']
					},
					'userInfo.intro': {
						type: 'string',
						required: true,
						message: '请填写简介',
						trigger: ['change']
					}
				},
				radio: '',
				switchVal: false
			};
		},
		methods: {
			// 显示性别列表并校验性别是否为那女
			gudingSelect(e) {
				console.log('选择的工资方式是', e)
				this.isqujian = e.index
				this.gudingxinzi = e.name
			},
			unitSelect(e) {
				this.model.userInfo.salaryUnit = e.index
				console.log('选择的工资单位是', e)
				this.danwei = e.name
			},
			jiesuanSelect(e) {
				console.log('选择的结算方式是', e)
				this.model.userInfo.settlement = e.index
				this.jiesuan = e.name
			},
			baomingSelect(e) {
				console.log('选择的报名内容是', e)
				this.fangshi = e.name
				this.model.userInfo.contractMethod = e.index
			},
			// 性别选择关闭,校验是否选择性别
			genderClose() {
				// this.$refs.form1.validateField('userInfo.gender')
			},
			changeHandler(e) {
				console.log('监听变化', e)
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				let inter = []
				// if (index == 0) {
				// 	inter.push('面议')
				// } else {
					for (let i = index + 1; i < index + 30; i++) {
						inter.push(i *100)
					}
				// }
				this.columnData[index] = inter
				
				if (columnIndex === 0) {
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				console.log('confirm', e)
				this.model.userInfo.salaryMin = e.value[0]
				this.model.userInfo.salaryMax = e.value[1]
				this.moeny = e.value[0] +'~'+e.value[1]
				this.show = false
				this.gongzhongisShow = false
			},
			//picker滑动改变时触发
			bindMultiPickerColumnChange(e) {
				console.log('监听变化', e)
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.gongzhongPicker
				} = e
				console.log('第几列：' + columnIndex + '，下标值为：' + index + '=====' + e.indexs)
				// let inter = []
				// if (columnIndex == 0) {
				// 	let arr = this.gongzhongList[e.indexs[0]].children
				// 	for (let i = 0; i < arr.length; i++) {
				// 		inter.push(arr[i].skillName)
				// 	}
				// 	this.gongzhongList[e.indexs[0]] = inter
				// 	console.log('inter=第一列戳发====', inter)
				// } else if (columnIndex == 1) {
				// 	let arr = this.gongzhongList[e.indexs[0]].children[e.indexs[1]].children
				// 	console.log('inter=====第二列戳发', arr)
				// 	for (let i = 0; i < arr.length; i++) {
				// 		inter.push(arr[i].skillName)
				// 	}
				// 	this.gongzhongList[e.indexs[0]][e.indexs[1]] = inter
				// }
				// if (columnIndex === 0) {
				// 	picker.setColumnValues(1, this.gongzhongList[e.indexs[0]])
				// }
				// if (columnIndex === 1) {
				// 	picker.setColumnValues(2, this.gongzhongList[e.indexs[0]][e.indexs[1]])
				// }
				// let arr = []
				// for (let k = 0; k < this.gongzhongList.length; k++) {
				// 	arr[k] = this.gongzhongList[k].skillName
				// }
				// let arr1 = []
				// for (let k = 0; k < this.gongzhongList[e.indexs[0]].children.length; k++) {
				// 	arr1[k] = this.gongzhongList[e.indexs[0]].children[k].skillName
				// }
				// let arr2 = []
				// for (let k = 0; k < this.gongzhongList[e.indexs[0]].children[e.indexs[1]].children.length; k++) {
				// 	arr2[k] = this.gongzhongList[e.indexs[0]].children[e.indexs[1]].children[k].skillName
				// }
				// this.gongzhongcolumns[0] = arr
				// this.gongzhongcolumns[1] = arr1
				// this.gongzhongcolumns[2] = arr2
				// if (columnIndex === 0) {
					// picker.setColumnValues(0, arr)
					// picker.setColumnValues(1, arr1)
					// picker.setColumnValues(2, arr2)
				// }
				// if (columnIndex === 1) {
					// picker.setColumnValues(2, this.gongzhongList[e.indexs[0]][e.indexs[1]])
					// picker.setColumnValues(2, arr2)
				// }
			},
			//查询工种
			getQueryType() {
				let types = "construction"
				this.Qurylist = []
				index.getPublicMember({}, 'client/skills/listV2/' + types, 'get', res => {
					if (res.data.success && res.data.code == 200) {
						this.gongzhongList = res.data.result
						console.log('行业类别', this.gongzhongList)
						// this.gongzhongisShow=true
						let arr = []
						for (let k = 0; k < this.gongzhongList.length; k++) {
							arr[k] = this.gongzhongList[k].skillName
						}
						// let arr1 = []
						// for (let k = 0; k < this.gongzhongList[0].children.length; k++) {
						// 	arr1[k] = this.gongzhongList[0].children[k].skillName
						// }
						// let arr2 = []
						// for (let k = 0; k < this.gongzhongList[0].children[0].children.length; k++) {
						// 	arr2[k] = this.gongzhongList[0].children[0].children[k].skillName
						// }
						this.gongzhongcolumns[0] = arr
						// this.gongzhongcolumns[1] = arr1
						// this.gongzhongcolumns[2] = arr2
					} else {
						this.Qurylist = []
						this.gongzhongList = []
					}
				})
			},
			// 隐藏键盘
			hideKeyboard() {
				uni.hideKeyboard()
			},

			submit() {
				console.log("失败信息:" + JSON.stringify(this.model.userInfo))
				index.getPublicUserMember(this.model.userInfo, 'client/recuitjob/publish', 'post', res => {
					if (res.data.success && res.data.code == 200) {
						
					} 
				})
				// this.$refs.form1.validate().then(res => {
				// 	console.log("提交表单信息:" + JSON.stringify(this.model.userInfo))
					
				// 	// uni.$u.toast('校验通过')
				// 	// 调用服务端入表接口
				// }).catch(errors => {
				// 	console.log("失败信息:" + JSON.stringify(errors))
				// 	// uni.$u.toast('校验失败')
				// })
			},
			getUnitList(){
				index.getPublicMember({}, '/client/public/unit/of/money', 'get', res => {
					if (res.data.success && res.data.code == 200) {
						let arr = []
						for (let i = 0; i < res.data.result.length; i++) {
							arr.push({"name":res.data.result[i].unit})
						}
						this.danweiunit = arr
					} 
				})
			},
			getjiesuanList(){
				index.getPublicMember({}, '/client/public/find/settlement', 'get', res => {
					if (res.data.success && res.data.code == 200) {
						let arr = []
						for (let i = 0; i < res.data.result.length; i++) {
							arr.push({"name":res.data.result[i].settlement})
						}
						this.jiesuanType = arr
					} 
				})
			}
			
		},
		onLoad() {
			let arr = ['面议']
			for (let k = 1; k < 30; k++) {
				arr[k] = k *100
			}
			this.columns[0] = arr
			console.log('columns\columns', this.columns)
		},

		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			// this.$refs.form1.setRules(this.rules)
			this.getQueryType()
			this.getjiesuanList()
			this.getUnitList()
		}

	};
</script>

<style lang="scss">
	.page {
		margin: 15px;
		// background-color: gainsboro;
	}
</style>